<template>
  <fragment>
    <!--用户栏气泡窗-->
    <el-popover ref="popover_user" placement="bottom-end" width="260" v-model="expand">
      <el-row class="main">
        <el-col :span="24" class="bg-primary">
          <img src="/static/img/head_02.png" class="img-circle" alt="header"/>
          <p class="user-info"> {{ userInfo.username }} </p>
          <p class="user-info"> {{ userInfo.motto }}</p>
        </el-col>
        <el-col :span="24" class="button_group">
          <el-col :span="8">
            <el-button type="text">任务</el-button>
          </el-col>
          <el-col :span="8">
            <el-button type="text">消息</el-button>
          </el-col>
          <el-col :span="8">
            <el-button type="text">预留</el-button>
          </el-col>
        </el-col>
        <el-col :span="24">
          <el-button plain class="pull-left">修改密码</el-button>
          <el-button plain class="pull-right" @click="logout">登出</el-button>
        </el-col>
      </el-row>
    </el-popover>

    <!--用户栏-->
    <el-row class="sea-toolbar-button" v-popover:popover_user style="float:right;">
      <el-avatar :size="36" src="/static/img/head_01.png" style="margin-top: 12px"></el-avatar>
    </el-row>
  </fragment>
</template>

<script>

/**
 * 主页面板
 */
export default {
    name: "user",
    data() {
        return {
            // 是否展开用户栏
            expand: false

            //
            , userInfo: {}
        }
    }
    , mounted() {
        this.userInfo = this.$application.getUserInfo();
        console.log(this.userInfo);
    }
    , methods: {


        logout: function (){
            this.$application.logout();
            this.$router.push({path: '/login'});
        }
    }
}
</script>

<style scoped>
.main {
    text-align: center;
}

.user-info {
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    margin-top: 10px;
}

.img-circle {
    margin-top: 26px;
    height: 90px;
    width: 90px;
    background-color: #eeeeee;
    border: 3px solid rgba(255, 255, 255, 0.2);
}

.button_group {
    margin: 5px 0 5px 0;
}
</style>
